<template>
  <div>
    <div class="common-card mt20">
      <dc-cell title="支付方式趋势和分布" class="main-title"></dc-cell>
      <div class="common-chart" id="payline"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col span="7" class="text-left">支付方式</dc-col>
        <dc-col span="7">实际收入</dc-col>
        <dc-col span="6">占比</dc-col>
      </dc-row>
      <dc-row v-for="(item, index) in payRank" :key="item.paymentName" class="bg-white echarts-list-data" type="flex" justify="space-around">
        <dc-col span="7" class="text-left ellipsis">
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.paymentName}}
        </dc-col>
        <dc-col span="7">{{item.businessTurnover}}</dc-col>
        <dc-col span="6">{{item.percentage}}%</dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="销售来源趋势和分布" class="main-title"></dc-cell>
      <div class="common-chart" id="saleline"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col span="5" class="text-left">销售来源</dc-col>
        <dc-col span="5">客单数</dc-col>
        <dc-col span="5">营业额</dc-col>
        <dc-col span="5">占比</dc-col>
      </dc-row>
      <dc-row v-for="(item, index) in saleRank" :key="item.saleSource" class="bg-white echarts-list-data" type="flex" justify="space-around">
        <dc-col span="5" class="text-left ellipsis">
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.saleSource}}
        </dc-col>
        <dc-col span="5">{{item.orderNumber}}</dc-col>
        <dc-col span="5">{{item.businessTurnover}}</dc-col>
        <dc-col span="5">{{item.percentage}}%</dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="不同市别营业额趋势对比" class="main-title"></dc-cell>
      <div class="common-chart" id="periodline"></div>
    </div>
    <div class="common-card mt20 mb20">
      <dc-cell title="优惠构成趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="discline"></div>
    </div>
  </div>
</template>

<script>
  import {initLine} from '@/common/echarts/line';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import api from '@/common/api/bsAnalysis';
  import colors from '@/common/echarts/theme.json';
  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    data () {
      return {
        payRank: [],
        saleRank: [],
        saleLines: {},
        payLines: {},
        marketLines: {},
        discLines: {},
        payLine: null,
        saleLine: null,
        discLine: null,
        marketLine: null,
        colors: colors.color
      };
    },
    watch: {
      beginTime () {
        this.dataInit();
        this.buildChart();
      }
    },
    methods: {
      //重新生成所有图表
      buildChart () {
        let data = {
          timeFlag: this.timeFlag,
          beginTime: this.beginTime,
          endTime: this.endTime
        };
        this._getPaymentType(data);
        this._getSalesource(data);
        this._getMarket(data);
        this._getDiscount(data);
      },
      dataInit () {
        this.payRank = [];
        this.saleRank = [];
        this.saleLines = {
          series: [{name: '', type: 'line', data: ['0']}],
          seriesX: ['0']
        };
        this.payLines = {
          legName: [],
          series: [{name: '', type: 'line', data: ['0']}],
          seriesX: ['0']
        };
        this.marketLines = {
          series: [{name: '', type: 'line', data: ['0']}],
          seriesX: ['0']
        };
        this.discLines = {
          series: [{name: '', type: 'line', data: ['0']}],
          seriesX: ['0']
        };
        this.initPayLine();
        this.initSaleLine();
        this.initPeriodLine();
        this.initTrendLine();
      },
      _getPaymentType (data) {        //获取支付方式分布(按周)
        api.getPaymentType(data)
          .then(res => {
            if (res && res.length > 0) {
              this.payRank = res;
              this.payLines = this.getChartData(res, 'paymentDetail', 'paymentName', 'totalMoney', 'timeName', 'line', 'paymentName');
            }
            this.initPayLine();
          });
      },
      /**
       * 处理接口返回的数据成echart所需要的格式
       * @param list  待处理的数组
       * @param itemName  周月年详情数据
       * @param itemName1  series中的name数据
       * @param itemName2  series中的data数据
       * @param itemName3  X轴坐标中的数据
       * @param type  图表类型如'line'
       * @returns {{series: Array, seriesX: Array}}
       */
      getChartData (list, itemName, itemName1, itemName2, itemName3, type, leg) {
        let series = [];
        let seriesX = [];
        let legName = [];
        list.forEach((item, index) => {
          legName.push(item[leg]);
          if (item[itemName]) {
            seriesX = [];
            series[index] = {};
            series[index].name = item[itemName1];
            series[index].type = type;
            series[index].data = [];
            item[itemName].forEach((m) => {
              m[itemName2] = m[itemName2].replace(',', '');
              series[index].data.push(m[itemName2]);
              seriesX.push(m[itemName3]);
            });
          }
        });
        return {
          legName: legName,
          series: series,
          seriesX: seriesX
        };
      },
      _getSalesource (data) {        //获取销售来源占比(按周)
        api.getSalesource(data)
          .then(res => {
            if (res && res.length > 0) {
              this.saleRank = res;
              this.saleLines = this.getChartData(res, 'saleSourceDetail', 'saleSource', 'totalMoney', 'timeName', 'line', 'saleSource');
              this.initSaleLine();
            }
          });
      },
      _getMarket (data) {        //获取不同市别营业额占比(按周)
        api.getMarket(data)
          .then(res => {
            if (res && res.length > 0) {
              this.marketLines = this.getChartData(res, 'marketDetail', 'marketName', 'totalMoney', 'timeName', 'line', 'marketName');
              this.initPeriodLine();
            }
          });
      },
      _getDiscount (data) {        //获取优惠构成(按周)
        api.getDiscount(data)
          .then(res => {
            if (res && res.length > 0) {
              this.discLines = this.getChartData(res, 'discountWayDetail', 'discountWay', 'totalMoney', 'timeName', 'line', 'discountWay');
            }
            this.initTrendLine();
          });
      },
      //支付方式分布(按周)
      initPayLine () {
        this.payLine.hideLoading();
        this.payLine.setOption({
          grid: {
            y2: Math.ceil(this.payLines.legName.length / 3) * 30
          },
          legend: {
            data: this.payLines.legName
          },
          xAxis: {
            data: this.payLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '现金'
            }
          ],
          series: this.payLines.series
        });
      },
      //销售来源分布(按周)
      initSaleLine () {
        this.saleLine.hideLoading();
        this.saleLine.setOption({
          legend: {
            data: this.saleLines.legName
          },
          xAxis: {
            data: this.saleLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '营业额'
            }
          ],
          series: this.saleLines.series
        });
      },
      //不同市别营业额趋势对比(按周)
      initPeriodLine () {
        this.marketLine.hideLoading();
        this.marketLine.setOption({
          legend: {
            data: this.marketLines.legName
          },
          xAxis: {
            data: this.marketLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '营业额'
            }
          ],
          series: this.marketLines.series
        });
      },
      //优惠构成趋势(按周)
      initTrendLine () {
        this.discLine.hideLoading();
        this.discLine.setOption({
          legend: {
            data: this.discLines.legName
          },
          xAxis: {
            data: this.discLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '优惠金额(分摊)'
            }
          ],
          series: this.discLines.series
        });
      }
    },
    mounted () {
      this.payLine = initLine('#payline');
      this.saleLine = initLine('#saleline');
      this.discLine = initLine('#discline');
      this.marketLine = initLine('#periodline');
      this.dataInit();
    },
    activated () {
      this.dataInit();
      this.buildChart();
    },
    created () {
      this.buildChart();
    }
  };
</script>

<style lang="scss" scoped>
</style>
